<template>
  <!-- 单列视频 大图 + 标题-->
  <div class="single-img-text">
    <div v-for="(item, index) in list" :key="index" class="img-text-item">
      <div class="img">
        <img :src="item.img" />
        <div class="cover">
          <div class="time">00:30</div>
        </div>
      </div>
      <p class="title double-line-ellipsis">{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        img:
          'https://jimu-dev-pub.oss-cn-shanghai.aliyuncs.com/image/1234/F10A30C428624FFEA0ABA30C1222A40B.png',
      };
    },
    methods: {},
  };
</script>
<style lang="less" scoped>
  .single-img-text {
    .img-text-item {
      width: 67rem;
      border-radius: 2rem;
      overflow: hidden;
      margin-bottom: 4rem;
      .img {
        position: relative;
        height: 37.7rem;
        overflow: hidden;
        border-radius: 2rem;
        margin-bottom: 2.4rem;
        .cover {
          .time {
            position: absolute;
            bottom: 2.4rem;
            left: 2.4rem;
            right: 2.4rem;
            text-align: right;
          }
        }
      }
      .title {
        font-size: 3.3rem;
        font-weight: 800;
        color: var(--textBrightColor);
        line-height: 4.3rem;
      }
    }
  }
</style>
